<template>
  <div style="margin: 0 20px">
    <div class="search">
      <div class="left">
        <div>
          <span>消防机构: </span>
          <el-tree-select
            v-model="mechanismId"
            placeholder="请选择消防机构"
            node-key="xfjyjgTywysbm"
            style="flex: 1"
            :data="treeData"
            :props="props"
            :check-strictly="true"
            clearable
            @change="treeChange"
          />
        </div>
      </div>
      <div class="right">
        <el-input v-model.trim="xfjgSearch" placeholder="请输入设备名搜索" style="width: 200px">
          <template #suffix>
            <el-icon class="el-input__icon"><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <Table :table-info="tableInfo" :table-data="xfjgTableData">
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <span
            v-if="scope.row.zxzt === '在线'"
            class="operation"
            style="padding-right: 20px"
            @click="play(scope.row)"
            >播放</span
          >
          <span
            v-if="scope.row.ssJgmc"
            class="operation red_color"
            @click="clearRelation(scope.row)"
            >解除关联</span
          >
          <span v-else class="operation" @click="relation(scope.row)">去关联</span>
        </template>
      </el-table-column>
    </Table>

    <!-- 选择消防机构后 隐藏这个分页 -->
    <el-pagination
      v-if="!mechanismId"
      background
      layout="total, sizes, prev, pager, next"
      :total="total"
      :page-sizes="[10, 15, 30, 50, 100]"
      style="position: absolute; bottom: 20px; right: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 全部视频监控 选择消防机构显示 -->
    <div v-if="mechanismId">
      <el-divider />
      <div class="search" style="padding-top: 0">
        <div class="left">
          <div>
            <span>所有视频监控</span>
          </div>
        </div>
        <div class="right">
          <el-input v-model.trim="search" placeholder="请输入设备名搜索" style="width: 200px">
            <template #suffix>
              <el-icon class="el-input__icon"><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
      <Table :table-info="tableInfo" :table-data="tableData">
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <span
              v-if="scope.row.zxzt === '在线'"
              class="operation"
              style="padding-right: 20px"
              @click="play(scope.row)"
              >播放</span
            >
            <span
              v-if="scope.row.ssJgmc"
              class="operation red_color"
              @click="clearRelation(scope.row)"
              >解除关联</span
            >
            <span v-else class="operation" @click="relation(scope.row)">去关联</span>
          </template>
        </el-table-column>
      </Table>

      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
        :page-sizes="[10, 15, 30, 50, 100]"
        style="position: absolute; bottom: 20px; right: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <!-- 关联机构弹窗 -->
  <AddRelation
    v-if="userStore.addRelationShow"
    dialog-title="车辆关联机构"
    @add-relation="addRelation"
  />
  <!-- 解除关联机构弹窗 -->
  <ClearRelation
    :text-one="textOne"
    :text-two="textTwo"
    @clear-relation-click="clearRelationClick"
  />
  <!-- 视频播放弹窗 -->
  <VideoPopup v-if="userStore.videoPopupShow" :video-info="VideoInfo" />
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {
  cgQuerySpjkxxList,
  cgQueryFireControlTree,
  cgJgIdQuerySpjkxxList,
  cgEditSpjkxx,
  cgQueryVideoSrc,
} from '@/service'
import { ElMessage, ElMessageBox } from 'element-plus'
import Table from '@/components/table.vue'
import { useUserStore } from '@/store'
import VideoPopup from './components/videoPopup.vue'
import AddRelation from './components/addRelation.vue'
import ClearRelation from './components/clearRelation.vue'

const userStore = useUserStore()

const mechanismId = ref('')
const props = {
  label: 'jgjc',
  children: 'childXfjgTreeInfo',
  disabled: 'disabled',
}
/** 获取树形数据 */
const treeData = ref([])
const getTreeData = () => {
  cgQueryFireControlTree().then((res: any) => {
    treeData.value = res
  })
}
getTreeData()

/** 机构搜索框 */
const xfjgSearch = ref('')
watch(
  () => xfjgSearch.value,
  (newVal, oldVal) => {
    if (mechanismId.value) {
      xfjgPageInfo.value.searchValue = newVal
      getXfjgQuerySpjk(mechanismId.value)
    } else {
      pageInfo.value.searchValue = newVal
      getVideoInfo()
    }
  }
)
/** 选择消防机构 */
const xfjgPageInfo = ref({ searchValue: '' })
const treeChange = (val: any) => {
  xfjgSearch.value = ''
  xfjgPageInfo.value.searchValue = ''
  if (val) {
    tableInfo.value.tableHeight = 260
    getXfjgQuerySpjk(val)
  } else {
    search.value = ''
    pageInfo.value = { pageNo: 1, pageSize: 10, searchValue: '' }
    tableInfo.value.tableHeight = 640
    getVideoInfo()
  }
}
// 根据消防机构获取视频监控
const getXfjgQuerySpjk = (val: any) => {
  cgJgIdQuerySpjkxxList({ jyjgId: val, ...xfjgPageInfo.value }).then((res: any) => {
    xfjgTableData.value = res
    xfjgTableData.value.forEach((item: any) => {
      item.zxzt = item.zxzt ? '在线' : '离线'
    })
  })
}

/** 全部的搜索框 */
const search = ref('')
watch(
  () => search.value,
  (newVal, oldVal) => {
    pageInfo.value.searchValue = newVal
    getVideoInfo()
  }
)
// 表格数据
const xfjgTableData = ref([])
const tableData = ref([])
const total = ref()
const tableInfo = ref({
  columns: [
    { props: 'mc', label: '设备名称' },
    { props: 'sbLxMc', label: '设备类型' },
    { props: 'ssJgmc', label: '关联机构' },
    { props: 'zxzt', label: '是否在线' },
  ],
  tableHeight: 640,
})
const pageInfo = ref({ pageNo: 1, pageSize: 10, searchValue: '' })
/** 获取视频监控信息 */
const getVideoInfo = () => {
  cgQuerySpjkxxList(pageInfo.value).then((res: any) => {
    tableData.value = res.records
    tableData.value.forEach((item: any) => {
      item.zxzt = item.zxzt ? '在线' : '离线'
    })
    //没选择机构之前查询全部数据
    if (!mechanismId.value) {
      xfjgTableData.value = tableData.value
    }
    total.value = res.total
  })
}
getVideoInfo()

/** 分页操作 */
//切换页码
const handleCurrentChange = (val: any) => {
  pageInfo.value.pageNo = val
  getVideoInfo()
}
//选择条数
const handleSizeChange = (val: any) => {
  pageInfo.value.pageSize = val
  getVideoInfo()
}

const rowInfo: any = ref({})
/** 点击播放事件 */
const VideoInfo = ref({
  src: '', //视频源
})
const play = (row: any) => {
  cgQueryVideoSrc({ channelID: row.tdId }).then((res: any) => {
    userStore.videoPopupShow = true
    VideoInfo.value.src = res.data.url.httpflv
  })
}

/** 点击关联事件 */
const relation = (row: any) => {
  userStore.addRelationShow = true
  rowInfo.value = row
}
// 子组件确认关联事件
const addRelation = (addMechanismId: any) => {
  rowInfo.value.ssId = addMechanismId
  const data = { ...rowInfo.value }
  data.zxzt = data.zxzt === '在线' ? true : false
  cgEditSpjkxx(data)
    .then(() => {
      ElMessage.success('添加关联成功')
      if (mechanismId.value) {
        getXfjgQuerySpjk(mechanismId.value)
      }
      getVideoInfo()
    })
    .catch(() => {
      ElMessage.error('添加关联失败')
    })
  userStore.addRelationShow = false
}

/** 解除关联 */
const textOne = ref('')
const textTwo = ref('')
const clearRelation = (row: any) => {
  userStore.clearRelationShow = true
  rowInfo.value = row
  textOne.value = row.mc
  textTwo.value = row.ssJgmc
}
// 子组件确认解除关联事件
const clearRelationClick = () => {
  rowInfo.value.ssId = null
  const data = { ...rowInfo.value }
  data.zxzt = data.zxzt === '在线' ? true : false
  cgEditSpjkxx(data)
    .then(() => {
      ElMessage.success('解除关联成功')
      if (mechanismId.value) {
        getXfjgQuerySpjk(mechanismId.value)
      }
      getVideoInfo()
    })
    .catch(() => {
      ElMessage.error('解除关联失败')
    })
  userStore.clearRelationShow = false
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  .left {
    display: flex;
    align-items: center;
    flex: 1;
    span:nth-child(2) {
      // font-size: 14px;
      color: #606266;
    }
  }
  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 300px;
    .add {
      width: 70px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      background-color: #209dbe;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}

.delete {
  color: red;
  cursor: pointer;
}
</style>
